<template>
	<view class="container">
		<!-- 导航栏 -->
		<nav-bar backUrl="/pages/technician-apply/technician-apply"></nav-bar>
		<view class="record-list" v-if="records.length > 0">
			<view class="record-item" v-for="(record, index) in records" :key="index">
				<view class="record-header">
					<text class="record-time">{{ formatTime(record.createTime) }}</text>
					<text class="record-status" :class="getStatusClass(record.status)">{{ getStatusText(record.status) }}</text>
				</view>
				
				<view class="record-content">
					<view class="info-row">
						<text class="label">姓名：</text>
						<text class="value">{{ record.name }}</text>
					</view>
					<view class="info-row">
						<text class="label">手机号：</text>
						<text class="value">{{ record.phoneNumber }}</text>
					</view>
					<view class="info-row">
						<text class="label">身份证号：</text>
						<text class="value">{{ maskIdCard(record.idCardNumber) }}</text>
					</view>
					<view class="info-row">
						<text class="label">门店：</text>
						<text class="value">{{ record.storeName || '未分配' }}</text>
					</view>
					<view class="info-row" v-if="record.rejectReason">
						<text class="label">拒绝原因：</text>
						<text class="value reject-reason">{{ record.rejectReason }}</text>
					</view>
				</view>
			</view>
		</view>
		
		<view class="empty-state" v-else>
			<image src="/static/empty.png" mode="aspectFit"></image>
			<text>暂无申请记录</text>
		</view>
		
		<view class="loading" v-if="loading">
			<text>加载中...</text>
		</view>
	</view>
</template>

<script>
import NavBar from '@/components/nav-bar/nav-bar.vue'
export default {
	components: {
		NavBar
	},
	data() {
		return {
			records: [],
			loading: false,
			userInfo: null
		}
	},
	
	onLoad() {
		const userInfoStr = uni.getStorageSync('userInfo');
		let ui = null;
		if (userInfoStr) {
			try {
				ui = typeof userInfoStr === 'string' ? JSON.parse(userInfoStr) : userInfoStr;
				if (ui && ui.code === 200 && ui.data) ui = ui.data;
			} catch (e) {
				ui = userInfoStr; // fallback
			}
		}
		this.userInfo = ui || {};
		this.loadRecords();
	},
	
	methods: {
		// 加载申请记录
		loadRecords() {
			if (this.loading) return;
			
			this.loading = true;
			
			uni.request({
				url: `${uni.$config.baseUrl}/technicianApplication/technicianApplication/member/${this.userInfo.memberId}`,
				method: 'GET',
				success: (res) => {
					if (res.data && res.data.code === 200) {
						let all = res.data.data || [];
						// 保险：若后端返回了多用户数据，前端再做一次过滤
						this.records = all.filter(r => r.memberId === this.userInfo.memberId);
					} else {
						uni.showToast({
							title: res.data.msg || '加载失败',
							icon: 'none'
						});
					}
				},
				fail: (err) => {
					console.error('加载申请记录失败:', err);
					uni.showToast({
						title: '加载失败，请重试',
						icon: 'none'
					});
				},
				complete: () => {
					this.loading = false;
				}
			});
		},
		
		// 格式化时间
		formatTime(timestamp) {
			if (!timestamp) return '';
			const date = new Date(timestamp);
			const year = date.getFullYear();
			const month = String(date.getMonth() + 1).padStart(2, '0');
			const day = String(date.getDate()).padStart(2, '0');
			const hour = String(date.getHours()).padStart(2, '0');
			const minute = String(date.getMinutes()).padStart(2, '0');
			return `${year}-${month}-${day} ${hour}:${minute}`;
		},
		
		// 获取状态文本
		getStatusText(status) {
			const statusMap = {
				0: '待审核',
				1: '已通过',
				2: '已拒绝'
			};
			return statusMap[status] || '未知状态';
		},
		
		// 获取状态样式类
		getStatusClass(status) {
			const classMap = {
				0: 'status-pending',
				1: 'status-approved',
				2: 'status-rejected'
			};
			return classMap[status] || '';
		},
		
		// 掩码处理身份证号
		maskIdCard(idCard) {
			if (!idCard) return '';
			return idCard.replace(/^(.{4})(?:\d+)(.{4})$/, '$1********$2');
		}
	}
}
</script>

<style lang="scss">
.container {
	min-height: 100vh;
	background-color: #f5f5f5;
	padding: 20rpx;
	
	.header {
		padding: 20rpx 0;
		margin-bottom: 20rpx;
		
		.title {
			font-size: 36rpx;
			font-weight: bold;
			color: #333;
		}
	}
	
	.record-list {
		.record-item {
			background-color: #fff;
			border-radius: 12rpx;
			padding: 30rpx;
			margin-bottom: 20rpx;
			box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
			
			.record-header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 20rpx;
				padding-bottom: 20rpx;
				border-bottom: 1rpx solid #eee;
				
				.record-time {
					font-size: 28rpx;
					color: #666;
				}
				
				.record-status {
					font-size: 28rpx;
					padding: 6rpx 20rpx;
					border-radius: 30rpx;
					
					&.status-pending {
						color: #ff9900;
						background-color: rgba(255, 153, 0, 0.1);
					}
					
					&.status-approved {
						color: #07c160;
						background-color: rgba(7, 193, 96, 0.1);
					}
					
					&.status-rejected {
						color: #ff4d4f;
						background-color: rgba(255, 77, 79, 0.1);
					}
				}
			}
			
			.record-content {
				.info-row {
					display: flex;
					margin-bottom: 16rpx;
					
					&:last-child {
						margin-bottom: 0;
					}
					
					.label {
						font-size: 28rpx;
						color: #666;
						width: 160rpx;
					}
					
					.value {
						font-size: 28rpx;
						color: #333;
						flex: 1;
						
						&.reject-reason {
							color: #ff4d4f;
						}
					}
				}
			}
		}
	}
	
	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 100rpx 0;
		
		image {
			width: 200rpx;
			height: 200rpx;
			margin-bottom: 30rpx;
		}
		
		text {
			font-size: 28rpx;
			color: #999;
		}
	}
	
	.loading {
		text-align: center;
		padding: 30rpx 0;
		
		text {
			font-size: 28rpx;
			color: #999;
		}
	}
}
</style> 